<template>
  <div class="node">
    <el-drawer v-model="drawer.show" :with-header="false" :before-close="handleClose">
      <el-tabs v-model="drawer.tabs">
        <el-tab-pane label="任务设置" :name="1"> 
          <ul class="node-box">
            <!-- 节点名称 -->
            <li>
              <el-alert title="节点名称" type="success" :closable="false" class="node-box-title" />
              <p>
                <el-input style="width: 214px;" v-model="forms.taskName"></el-input>
              </p>
            </li>
            <!-- 负责人 -->
            <li>
              <el-alert title="节点负责人" type="success" :closable="false" class="node-box-title" />
              <p>
                <el-select v-model="forms.officeIds" multiple placeholder="请选择">
                  <el-option v-for="item in option.user" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </p>
            </li>
            <!-- 审批负责人 -->
            <li v-if="props.editData.taskType === 1">
              <el-alert title="审批负责人" type="success" :closable="false" class="node-box-title" />
              <el-form :model="form" label-width="100px">
                <el-form-item label="审批类型">
                  <el-select v-model="forms.auditLevelType" placeholder="请选择" @change="onAuditTypeChange">
                    <el-option v-for="item in option.auditTypes" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
                <el-form-item :label="item.auditLevel + '级审批人员'" v-for="(item) in forms.orderAudits" :key="item.id">
                  <el-select v-model="item.auditOfficeIds" multiple placeholder="请选择">
                    <el-option v-for="item in option.user" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-form>
            </li>
            <!-- 默认截止日期 -->
            <li>
              <div class="node-box-title">
                <el-alert title="默认截止日期" type="success" :closable="false" />
              </div>
              <div style="display: flex; justify-content: flex-start; align-items: center;">
                <el-select v-model="forms.defaultAbortDateType" placeholder="截止日期类型">
                  <el-option v-for="item in option.defaultAbortDateTypes" :key="item.value" :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-select style="width: 150px;" v-model="forms.currentOurTaskId" placeholder="节点"
                  v-if="forms.defaultAbortDateType === 3">
                  <el-option v-for="item in dateOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <!-- 当选择节点时候才有这个 -->
                <p class="dis-flex flex-center">
                  <z-input v-model="forms.distanceHour" autofocus class="width-100" />
                  <span class="ml-10">小时</span>
                </p>
              </div>
            </li>
            <!-- 自动完成 -->
            <li v-if="props.editData.taskType !== 1">
              <div class="node-box-title">
                <el-alert title="是否自动完成" type="success" :closable="false" />
                <el-switch v-model="forms.isAutoFinish" :active-value="true" :inactive-value="false" class="ml-10">
                </el-switch>
              </div>
            </li>
            <!-- 必须完成 -->
            <li v-if="props.editData.taskType !== 1">
              <div class="node-box-title">
                <el-alert title="是否必须完成" type="success" :closable="false" />
                <el-switch v-model="forms.isMustFinish" :active-value="true" :inactive-value="false" class="ml-10">
                </el-switch>
              </div>
            </li>
            <!-- 只有金额节点才有 -->
            <template v-if="[6, 7, 8].includes(props.editData.taskType)">
              <!-- 计划金额比例 -->
              <li>
                <div class="node-box-title">
                  <el-alert title="计划金额比例" type="success" :closable="false" />
                </div>
                <div class="dis-flex flex-y-center">
                  <span>订单金额的</span>
                  <z-input v-model="forms.amountScale" autofocus class="width-100 ml-5 mr-5" />
                  <span>%</span>
                </div>
              </li>
              <!-- 金额关联 -->
              <li>
                <div class="node-box-title">
                  <el-alert title="金额关联" type="success" :closable="false" />
                </div>
                <div class="dis-flex flex-y-center">
                  <span>以</span>
                  <el-select v-model="forms.relevanceOurTaskId" placeholder="请选择" class="ml-5 mr-5">
                    <el-option v-for="item in numberOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                  <span>计算本节点应收金额</span>
                </div>
              </li>
            </template>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="操作权限" name="2">
          <ul class="node-box">
            <!-- 变更负责人权限 -->
            <li>
              <el-alert title="变更负责人权限" type="success" :closable="false" class="node-box-title" />
              <p class="ml-20">
                <el-radio v-model="forms.anybody" :label="0"
                  @change="onRadioChange('changeOfficeTypes', 'anybody')">任何人</el-radio>
                <el-checkbox-group v-model="forms.changeOfficeTypes" class="dis-flex flex-dir-column"
                  @change="onCheckChange('anybody', 'changeOfficeTypes')">
                  <el-checkbox :label="1">单据负责人</el-checkbox>
                  <el-checkbox :label="2">销售</el-checkbox>
                  <el-checkbox :label="4">任务负责人</el-checkbox>
                  <el-checkbox :label="8">任务负责人主管</el-checkbox>
                </el-checkbox-group>
              </p>
            </li>
            <!-- 变更负责人权限 -->
            <li>
              <el-alert title="设置截止日期权限" type="success" :closable="false" class="node-box-title" />
              <p class="ml-20">
                <el-radio v-model="forms.anybodyDate" :label="0"
                  @change="onRadioChange('setAbortDateTypes', 'anybodyDate')">任何人</el-radio>
                <el-checkbox-group v-model="forms.setAbortDateTypes" class="dis-flex flex-dir-column"
                  @change="onCheckChange('anybodyDate', 'setAbortDateTypes')">
                  <el-checkbox :label="1">单据负责人</el-checkbox>
                  <el-checkbox :label="2">销售</el-checkbox>
                  <el-checkbox :label="4">任务负责人</el-checkbox>
                  <el-checkbox :label="8">任务负责人主管</el-checkbox>
                </el-checkbox-group>
              </p>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <span class="dialog-footer">
          <z-button type="" @click="handleClose" icon="close">取消</z-button>
          <z-button icon="check" @click="onCheck" :loading="drawer.loading"> 确认 </z-button>
        </span>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { flowNodeDefault } from '@/page/flow/flow.js';
import { post } from '@/api/index';
import { computed, reactive } from '@vue/reactivity';
let $message = inject('$message');
let emit = defineEmits(['update:modelValue', 'onSave']);
let props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  editData: {
    type: Object,
    default: () => {
      return {};
    }
  },
  nodeList: {
    type: Array,
    default: () => {
      return [];
    }
  }
});
let option = reactive({
  user: [],
  defaultAbortDateTypes: [{ value: 0, label: '无' }, { value: 1, label: '开单日期后' }, { value: 2, label: '订单截止日期前' }, { value: 3, label: '节点完成后' }],
  auditTypes: [{ value: 1, label: '一级审批' }, { value: 2, label: '二级审批' }, { value: 3, label: '三级审批' }]
});
// 默认负责人
let userOptions = async (keyword) => {
  let { result } = await post('User/GetSelectPage', { keyWord: (keyword || ''), pageIndex: 1, pageSize: 50 });
  option.user = result.items;
};
userOptions('');

// 默认截止日期选项
let dateOptions = computed(() => {
  // 过滤掉 自身
  return props.nodeList
    // .filter(r => r.id !== props.editData.id)
    .map(r => {
      return {
        value: r.id,
        label: r.taskName
      };
    });
});
// 金额关联 数量节点
let numberOptions = computed(() => {
  let arr = [{ value: 0, label: '无' }];
  // 过滤掉 自身
  return [
    ...arr,
    ...props.nodeList
      .filter(r => [2, 3, 4, 5].includes(r.taskType))
      .map(r => {
        return {
          value: r.id,
          label: r.taskName
        };
      })
  ];
});
let registerRef = ref();
let drawer = reactive({
  show: false,
  tabs: 1,
  loading: false
});
let forms = reactive({});
watch(
  () => props.modelValue,
  val => {
    drawer.show = val;
    if (!val) return;
    drawer.tabs = 1;
    Object.keys(flowNodeDefault()).map(r => {
      forms[r] = props.editData[r];
    });

    forms.officeIds = props.editData.officeIds;

    // // 单独处理 截止日期
    // if (forms.currentOurTaskId > 1) {
    //   forms.defaultAbortDateType = forms.currentOurTaskId;
    // }
    // 处理操作权限
    if ([0].includes(forms.changeOfficeTypes)) {
      forms.changeOfficeTypes = [];
      forms.anybody = 0;
    }
    if ([0].includes(forms.setAbortDateTypes)) {
      forms.setAbortDateTypes = [];
      forms.anybodyDate = 0;
    }
    // 单独处理金额节点
    if ([6, 7, 8].includes(props.editData.taskType)) {
      // 如果关联项没有了，重置为无
      if (!numberOptions.value.find(r => r.value === forms.relevanceOurTaskId)) {
        forms.relevanceOurTaskId = 0;
      }
    } else {
      // 不是金额节点，这二个都重置一下。
      forms.relevanceOurTaskId = 0;
      forms.amountScale = 100;
    }
    // 如果默认截止日期关联项没有了，重置为无
    if (!option.defaultAbortDateTypes.find(r => r.value === forms.defaultAbortDateType)) {
      forms.defaultAbortDateType = 0;
      forms.currentOurTaskId = 0;
      // 小时也重置
      forms.distanceHour = 0;
    }
    if (forms.auditLevelType === 0) {
      forms.auditLevelType = 1;
      forms.orderAudits = [{ progressTaskId: forms.id, auditLevel: 1, auditType: 1, balanceAmount: 0, AuditOfficeIds: [] }]
    }

    if (forms.changeOfficeTypes.length === 0) forms.anybody = 0;
    if (forms.setAbortDateTypes.length === 0) forms.anybodyDate = 0;

  },
  {
    immediate: true
  }
);
// 关闭抽屉
const handleClose = () => {
  emit('update:modelValue', false);
};

// 切换审批类型
const onAuditTypeChange = (val) => {

  let res = [];
  for (let index = 1; index <= val; index++) {
    res.push({
      ...{ progressTaskId: forms.id, auditLevel: index, auditType: 1, balanceAmount: 0, AuditOfficeIds: [] }, // auditType = 1代表默认审批类型
      ...forms.orderAudits.find(n => n.auditLevel === index)
    })
  }
  forms.orderAudits = res;
}

// 点击确认修改按键
const onCheck = () => {
  let params = { ...forms };
  // 处理默认截止日期
  if (params.defaultAbortDateType < 2) {
    params.distanceHour = params.currentOurTaskId = 0;
  }
  // else {
  //   params.currentOurTaskId = params.defaultAbortDateType;
  //   // params.defaultAbortDateType = 0;
  // }
  // 处理操作权限
  if (params.anybody)
    params.changeOfficeTypes = [...params.changeOfficeTypes, params.anybody];
  if (params.anybodyDate)
    params.setAbortDateTypes = [...params.setAbortDateTypes, params.anybodyDate];
  emit('onSave', params);
};

const onCheckChange = (radio, checkbox) => {
  forms[radio] = forms[checkbox].length ? undefined : 0;
};
const onRadioChange = (checkbox, radio) => {
  if (forms[radio] === 0) forms[checkbox] = [];
};
</script>

<style lang="scss" scoped>
.node {

  &-box {

    &-title {
      margin: 10px 0;
      display: flex;
      align-items: center;
    }

    li {
      &:first-child .node-box-title {
        margin-top: 0;
      }
    }
  }
}
</style>
